<template>
  <cu-custom bg-color="bg-gradual-blue" is-back>
    <template #backText>返回</template>
    <template #content>设置资料</template>
  </cu-custom>
  <div class="setting-box">
    <div class="item" @click="toEditPwd">
      <div class="icon">
        <uni-icons type="compose" size="24" color="white"></uni-icons>
      </div>
      <div>修改密码</div>
      <uni-icons type="right" class="arrow" size="24"></uni-icons>
    </div>
  </div>
</template>

<script setup lang="ts">
const toEditPwd = () => {
  uni.navigateTo({ url: "/pages/login/editPwd" });
};
</script>

<style lang="scss" scoped>
.setting-box {
  .item {
    padding: 0 10rpx;
    display: flex;
    position: relative;
    align-items: center;
    width: 750rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: rgba(255, 255, 255, 1);
    .icon {
      margin-right: 10rpx;
      width: 70rpx;
      height: 70rpx;
      background: rgba(114, 148, 255, 1);
      border-radius: 50%;
      line-height: 70rpx;
      text-align: center;
    }
    .arrow {
      position: absolute;
      right: 0;
    }
  }
}
</style>
